<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>基于layui、zTree的下拉树控件</title>

<!-- 运行sample时，请根据实际的layui库所处位置修改链接地址 -->
<link rel="stylesheet" href="layui2.7.5/css/layui.css">

</head>
<body>

<div class="layui-container" style="padding: 30px 0;">
    <blockquote class="layui-elem-quote" style="color: #666;">
      请自行下载Layui库，Layui支持2.7.x、2.8.x版本，其它版本没有测试过。
    </blockquote>
	<div style="width: 50%;">
		<label class="layui-form-label">部门</label>
		<div class="layui-input-block">
			<div id="dept1"></div>
		</div>
	</div>
</div>

<!-- 运行sample时，请根据实际的layui库所处位置修改链接地址 -->
<script src="layui2.7.5/layui.js"></script>
<script>
layui.config({
    base:'./'
}).extend({
  combotree: 'combotree'
});
layui.use(['combotree'], function(){
  var $ = layui.$;
  var combotree = layui.combotree;

  // test
  var treeTestData = [
    {"id":1,"name":"XXXX公司","pid":null},
	{"id":2,"name":"软件研发部","pid":1},
	{"id":40,"name":"软件研发1部","pid":2},
    {"id":41,"name":"软件研发2部","pid":2},
    {"id":42,"name":"软件研发3部","pid":2},
	{"id":43,"name":"软件研发4部","pid":2},
	{"id":3,"name":"系统集成部","pid":1},
	{"id":40,"name":"系统集成1部","pid":3},
    {"id":41,"name":"系统集成2部","pid":3},
    {"id":42,"name":"系统集成3部","pid":3},
	{"id":43,"name":"系统集成4部","pid":3},
	{"id":44,"name":"系统集成5部","pid":3},
	{"id":45,"name":"系统集成6部","pid":3},
	{"id":46,"name":"系统集成7部","pid":3},
 ];
  // 渲染组织
  combotree.render({
    elem: '#dept1'
    ,isMultiple: true
    ,expandLevel: 1
    ,data: treeTestData
  });
	
});
</script>
</body>
</html>
